<template>
  <div class="contract-detail">
    <div class="detail-loading" v-if="iframeLoading">正在加载中...</div>
    <iframe :src="iframeSrc" @load="onLoad" class="ifram-wrapper"></iframe>
  </div>
</template>

<script>
import { describeFlowDetailInfo } from '@common/api/contract';
import { getExternalLink } from '@common/api/staff';
import { Loading } from 'element-ui';

export default {
  data() {
    return {
      detailInfo: {},
      iframeLoading: true,
      iframeSrc: '',
    };
  },
  async created() {
    const { flowId } = this.$route.params;
    this.loadingInstance = Loading.service({
      target: document.querySelector('.detail-loading'),
      text: '加载中。。。',
      fullscreen: false,
    });
    if (flowId) {
      const res = await getExternalLink({ MenuStatus: 'DISABLE', Module: 'DOCUMENT', ModuleId: flowId });
      console.log(res.data.ConsoleUrl, 'res=====');
      this.iframeSrc = res.data.ConsoleUrl;
      // console.log(this.iframeSrc, 'this.iframeSrc.......');
    }
  },
  methods: {
    onLoad() {
      this.loadingInstance.close();
      this.iframeLoading = false;
    },
    async fetchDetailInfo(params) {
      const data = await describeFlowDetailInfo(params);

      const flowInfos = data.FlowInfo;
      // 示例仅显示第一个
      this.detailInfo = (flowInfos && flowInfos[0]) || [];
    },
  },
};
</script>

<style lang="scss">
.contract-detail {
  position: absolute;
  width: calc(100% - 40px);
  top: 94px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 400px;
    width: 100%;
    color: #000;
  }
  .ifram-wrapper {
    position: relative;
    width: 100%;
    height: calc(100% + 51px);
    top: -51px;
    left: 0px;
  }
}
</style>
